import { FC } from 'react';
import styles from './index.less';

import Form from './components/Form';
import List from './components/List';

import { useSelector, useDispatch } from 'umi';

const Index: FC = () => {
  const count = useSelector((state: any) => state.index.count);
  const dispatch = useDispatch();

  const add = () => {
    dispatch({
      type: 'index/increment',
    });
  };

  const minus = (n: number) => {
    dispatch({
      type: 'index/decrement',
      num: n,
    });
  };

  return (
    <div className={styles.wrap}>
      <h2>dva</h2>
      <button onClick={() => minus(2)}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <hr />

      <Form />
      <List />
    </div>
  );
};

export default Index;
